/*
* @Description:网络扩展-选择组织
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div class="select-group">
    <p>对{{orgName}}网络进行扩展</p>
    <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" border>
      <el-table-column label="选择" align="center" type="selection" width="100">
      </el-table-column>
      <el-table-column prop="alias" label="别名" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="server" label="服务器" align="center" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div align="center" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </div>
</template>
<script>
  import {
    getOldOrg,
    getOrgHost
  } from '@/api/blockchain/networkmanage'
  export default {
    props: ['orgName', 'orgHosts'],
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        initChoice: []
      };
    },
    mounted() {
      this.getOneOldOrg();
    },
    methods: {
      getOneOldOrg() {
        let _this = this;
        getOldOrg(_this.orgName, _this.orgHosts).then((res) => {
          for (let i = 0; i < res.length; i++) {
            _this.tableData.push({
              id: '',
              alias: '',
              server: ''
            });
            _this.tableData[i].id = i;
            _this.tableData[i].alias = res[i].mark;
            _this.tableData[i].server = res[i].ip;
            if (_this.orgHosts.split(',').indexOf(res[i].mark) != -1) {
              _this.$refs.multipleTable.toggleRowSelection(_this.tableData[i]);
            }
          }
          _this.initChoice = JSON.parse(JSON.stringify(_this.$refs.multipleTable.selection))
        }).catch((err) => {
          console.log(err);
        });
      },
      getOrgHosts() {
        let _this = this;
        let alisArr = [];
        this.multipleSelection.forEach(item => {
          alisArr.push(item.alias);
        })
        if (!alisArr.length && !this.initChoice.length) {
          this.$message.warning('请选择要扩展的主机！')
          return
        }
        getOrgHost(alisArr.join(',')).then((res) => {
          _this.$emit('close-dialog', true);
        }).catch((err) => {
          console.log(err);
        });
      },
      handleSelectionChange(vals) {
        this.multipleSelection = vals;
      },
      confirm() {
        this.getOrgHosts();
      },
    }
  };

</script>
<style lang="scss" scoped>
  .select-group {
    padding: 20px 30px;
  }

  .dialog-footer {
    margin-top: 40px;
  }

  .el-table>>>.el-table__row .el-table-column--selection .cell {
    padding: 0;
  }

</style>
